<template>
  <!--  轮播图 资讯-->
  <div class="main" style=" width: 80%; margin: 0 auto;margin-top: 10px;">
    <!--  轮播图-->
    <div class="block" style="width: 71%; float: left">
      <el-carousel height="250px">
        <el-carousel-item  v-for="(items,index) in item" :key="index" >
          <img :src="items" style="height: 250px;width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  import api from "../../../axios/api"

  export default {
    name: "scrolls",
    data() {
      return{
        news:"",
        item:["./static/images/1.jpg", "./static/images/2.jpg","./static/images/3.jpg", "./static/images/8.jpg"]
      }
    },
    methods:{
      getImgUrl: function (imgsrc) {
        return  this.$store.state.host + "/upload/images/carouselmap/" + imgsrc;
      },
      setDataFromAxios: function () {
        //this.initpic();
        //console.log(prno)
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios( "/api/newsController/selectNewsWithCarouselmap/001", null, "post")
          .then(dto => {
            // console.log(dto);
            this.news = dto.t;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

      },

    },
    created() {
      this.setDataFromAxios();
    }
  }
</script>

<style scoped>
@media (max-width: 1600px) {
  html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
.subject {
  width: 100%;
}
.main{
  width:1200px;
}
}
.carouselmap{float: right;width: 28%;height: 223px;border-radius: 5px;border: 1px solid #eee; background: #fff;}
.carouselmap span{display: inline-block}
.main >.ranklist{ width:65%; height: px; float: left;}
.main >.ranklists{ width:34%; height: 540px; float: right;}

</style>
